<template>
  <div>
    <Dialog
      ref="Drawer"
      @close="close"
      :loading="loading"
      @handleSave="handleSave"
      :disabled="disabled"
      title="重置密码"
      :dialog="dialog"
    >
      <template #content>
        <el-form
          :disabled="disabled"
          :model="ruleForm"
          size="small"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          label-position="top"
          class="demo-ruleForm"
        >
          <!-- <el-form-item
            label="旧密码"
            prop="oldPassword"
          >
            <el-input
              type="password"
              v-model="ruleForm.oldPassword"
              placeholder="请输入旧密码"
            ></el-input>
          </el-form-item> -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="登入密码"
                prop="password"
              >
                <el-input
                  v-model="ruleForm.password"
                  type="password"
                  placeholder="请输入登入密码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="确认密码"
                prop="confirmPwd"
              >
                <el-input
                  type="password"
                  v-model="ruleForm.confirmPwd"
                  placeholder="请输入确认密码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as settingApi from "@/api/setting1";
export default {
  components: {
    Dialog,
  },
  data() {
    const validateConfirmPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入确认密码"));
      } else if (this.ruleForm.password && value != this.ruleForm.password) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    const validateLoginPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入登入密码"));
      } else if (value.length < 6 || value.length > 20) {
        callback(new Error("请输入6-20位登入密码"));
      } else if (
        this.ruleForm.confirmPwd &&
        value != this.ruleForm.confirmPwd
      ) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      dialog: false, //弹框
      rules: {
        //form表单非空校验
        // oldPassword: [
        //   {
        //     required: true,
        //     message: "请输入旧密码",
        //     trigger: "blur",
        //   },
        // ],
        password: [
          {
            validator: validateLoginPass,
            trigger: "blur",
            required: true,
          },
        ],
        confirmPwd: [
          {
            validator: validateConfirmPwd,
            trigger: "blur",
            required: true,
          },
        ],
      },
      ruleForm: {
        //表单提交
        // oldPassword: "", //旧密码
        password: "", //登入密码
        confirmPwd: "", //确认密码
        id: "",
        name: "",
      },
      formLabelWidth: "100px", //表单label宽度
      loading: false, //表单提交按钮
      disabled: false,
      title: "",
      options: [], //角色列表
    };
  },
  methods: {
    //弹框关闭
    close() {
      this.dialog = false;
    },
    //初始化弹框
    showModal(_row) {
      this.dialog = true;
      this.$nextTick((_) => {
        this.$refs.ruleForm.resetFields();
        this.ruleForm.id = _row.id;
        this.ruleForm.name = _row.name;
      });
    },
    //提交保存
    handleSave() {
      this.loading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          settingApi
            .modifyPassword(this.ruleForm)
            .then((res) => {
              if (res && res.success) {
                this.loading = false;
                this.dialog = false;
                this.$emit("getDataList");
              } else {
                this.loading = false;
              }
            })
            .catch((e) => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>
